<template>
	<view>

		<view style="height: 150upx;"></view>

		<view class="flex flex-direction align-center">
			<image style="width: 200upx; height: 150upx;" src="../static/icon/login_logo.png"></image>
			<view style="margin-top: 30upx;color: grey;">文本介绍 文本介绍 文本介绍 文本介绍</view>
		</view>

		<!-- 登录表单 SSSSSS -->
		<view style="padding-top: 120upx;">
			<view class="login-fa">
				<input class="login-input" placeholder="用户名/邮箱/手机号" v-model="form.name" />
			</view>
			<view class="login-fa">
				<input class="login-input" placeholder="密码" v-model="form.password" :password="true" />
			</view>
		</view>
		<view style="margin-top: 80upx;" class="flex justify-center">
			<button class="cu-btn shadow bg-gradual-red round lg" style="width: 550upx;" @tap="login">
				登录
			</button>
		</view>
		<!-- 登录表单 EEEEEE -->

		<view class="flex justify-between login-fa" style="margin-top: 50upx;">
			<text>忘记密码</text>
			<text>新用户注册</text>
		</view>

		<view class="flex justify-between align-center" style="margin:80upx 50upx 20upx;">
			<view class="line"></view>
			<view class="other-login-text">其他登录方式</view>
			<view class="line"></view>
		</view>
		<view class="login-channel">
			<view class="login-channel-view ">
				<image src="../static/icon/wx.png"></image>
				<view>微信登录</view>
			</view>
			<view class="login-channel-view">
				<image src="../static/icon/mobile.png"></image>
				<view>手机登录</view>
			</view>
		</view>

		<view class="bottom-text">
			<!-- xx科技 技术支持 -->
			登录代表您已同意<text class="text-blue">【隐私政策】</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					password: ''
				}
			}
		},
		onShow() {
			this.form.name = this.form.password = ''
		},
		methods: {
			login: function() {
				let name = this.form.name;
				let password = this.form.password;
				// if (name == '') {}
				uni.switchTab({
					url: 'index'
				})
			}
		}
	}
</script>

<style>
	.login-fa {
		padding-left: 80upx;
		padding-right: 80upx;
	}

	.login-input {
		height: 100upx;
		border-bottom: 1px solid #DDDDDD;
		font-size: 120%;
	}

	.line {
		height: 1upx;
		background-color: #DDDDDD;
		flex-grow: 1;
	}

	.other-login-text {
		margin: 0upx 30upx;
	}

	.login-channel {
		margin-top: 30upx;
		display: flex;
		justify-content: space-around;
	}

	.login-channel-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.login-channel-view view {
		margin-top: 10upx;
	}

	.login-channel image {
		width: 80upx;
		height: 80upx;
	}

	.bottom-text {
		position: fixed;
		bottom: 20upx;
		color: #AAAAAA;
		text-align: center;
		width: 100%;
	}
</style>
